<template>
  <div>
    <a-card title="交易监控数据" :bordered="false" :headStyle="{ padding: '0 15px', border:0}" style="width:100%">
      <ve-line
        :data="spacePeakValueData"
        :settings="hourSettings"
        :extend="chartExtend"
        :colors="hourcolors"
        :judge-width="true"
        height="200px">
      </ve-line>
    </a-card>
  </div>
</template>

<script>
// import { getMcaCount } from '@/api/performance'
import moment from 'moment'
export default {
  name: 'TableSpace',
  components: {
  },
  data () {
    return {
      hourcolors: ['#4688f1', '#759574', '#ecac6c', '#93aefc'],
      hourSettings: {
        yAxisType: ['KMB'],
        area: true
      },
      spaceSettings: {
        yAxisType: ['KMB']
        // xAxisType: 'time'
      },
      chartExtend: {
        title: {
          // text: '每日用户数',
          x: 'left',
          y: '-5px',
          textStyle: {
            fontSize: 13,
            fontWeight: 'bolder',
            color: '#333'// 主标题文字颜色
          }
        },
        dataZoom: [
          {
            type: 'inside'// inside表示内置的鼠标缩放滑动
          }
        ],
        grid: {
          top: '15%',
          left: '1%',
          right: '3%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          axisLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: {
          barWidth: 10,
          symbolSize: 3, // 拐点节点大小
          showSymbol: false // 是否默认显示拐点
          // symbol: 'none',
        }
      },
      spacePeakValueData: {
        columns: ['时间', '交易上溢20%', '交易下溢20%', '三小时差业务量'],
        rows: []
      }
    }
  },
  created () {
    this.getMonitorData()
  },
  mounted () {
    // 轮询接口
    const timers = window.setInterval(() => {
      setTimeout(res => {
      }, 0)// 利用定时器清除setInterval的每次叠加
    }, 60000)// 1分钟执行一次
    // this.once在离开当前路由时销毁定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timers)
    })
  },
  /**
   * 数字格式化为千分位
   */
  filters: {
    format: function (value) {
      return value.toLocaleString()
    }
  },
  methods: {
    /**
     * 表空间峰值
     */
    getMonitorData () {
      // 生产当月的开始日期
      const startDate = new Date(moment(new Date()).format('YYYY-MM-DD 00:00:00')).getTime()
      const endDate = new Date(moment(new Date()).format('YYYY-MM-DD 23:59:59')).getTime()
      for (let i = 0; i < 400; i += 1) {
        this.spacePeakValueData.rows.push({
          '时间': moment(this.randomDate(startDate, endDate)).format('YYYY-MM-DD HH:mm:ss'),
          '交易上溢20%': Math.floor(Math.random() * 1000000 + 100000), // 输出8000～12000之间的随机数
          '交易下溢20%': Math.floor(Math.random() * 1000000 + 100000), // 输出1000～8000之间的随机数
          '三小时差业务量': Math.floor(Math.random() * 1000000 + 100000) // 输出1000～8000之间的随机数
        })
      }
      this.spacePeakValueData.rows.sort(function (a, b) {
        return Date.parse(a[ '时间' ]) - Date.parse(b[ '时间' ]) // 时间正序
      })
      this.spacePeakValueData.rows.forEach((item) => {
        item['时间'] = moment(item['时间']).format('HH:mm:ss')
      })
    },
    /**
     * 生成指定时间段的随机时间
     */
    randomDate (startDate, endDate) {
      const date = new Date(+startDate + Math.random() * (endDate - startDate))
      const hour = 0 + Math.random() * (23 - 0) | 0
      const minute = 0 + Math.random() * (59 - 0) | 0
      const second = 0 + Math.random() * (59 - 0) | 0
      date.setHours(hour)
      date.setMinutes(minute)
      date.setSeconds(second)
      return date
    }
  }
}
</script>
<style lang="less" scoped>
  .ant-card{
    /deep/.ant-card-body{
      padding:0 15px 15px 15px;
    }
  }
</style>
